<template>
    <div class="login" id="login" @mousemove="slideMove" @mouseup="slideUp">
        <div class="header">
            <div class="logo">
                <div class="logo-box">
                    <img src="../../assets/img/logo.png" class="logo-img" alt="">
                </div>
                <div class="name">
                    人力共享控制台
                </div>
            </div>
        </div>
        <div class="content" id="content" style="display: block">
            <div class="login-box">
                <h2 class="login-title">登录控制台</h2>
                <div class="login-form">
                    <input v-model="username" ref="username" type="text" class="username" id="username" autocomplete="off" placeholder="用户名/账号" @blur="blur(0)">
                    <input v-model="password" ref="password" type="password" class="password" autocomplete="off" id="password" placeholder="密码" @blur="blur(1)">
                    <div class="slideVerify" :class="showImg ? 'show' : ''" @mouseout="mouseOut" @mouseover="mouseOver">
                        <div class="verify-img-panel" :class="showImg ? 'hover' : ''" ref="img_box" :style="'background:url('+imgUrl+') 0% 0% / 300px 150px;'">
                            <div class="verify-refresh"><i class="iconfont icon-refresh" @click="refresh"></i></div>
                            <!-- <div class="verify-gap" :style="'left:'+slideLeft+'px;top:'+blank_top+'px;background:url('+getBackGroundImg+') no-repeat '+blank_left+'px '+blank_top +'px 300px 150px;'"></div> -->
                            <div class="verify-gap" :style="`left:${slideLeft}px;top:${blank_top}px;background-image:url('${imgUrl}');background-size:300px 150px;background-position:${300-blank_left}px ${150-blank_top}px`"></div>                            
                            <div class="verify-blank" :style="'left:'+blank_left+'px;top:'+blank_top+'px'"></div>
                        </div>
                        <div class="verify-bar-area" ref="slide_box">
                            <span class="verify-msg" v-show="!mouseDownFlag">向右滑动,填充拼图</span>
                            <span class="verify-msg" v-show="mouseDownFlag">>>>></span>
                            <span class="verify-bc" :class="openAnimation ? 'animation' : ''" :style="'width:'+(slideLeft+2)+'px'"></span>
                            <div class="verify-left-bar"
                                :class="openAnimation ? 'animation' : ''"
                                @mousedown="slideDown"
                                @mouseover="mouseOverFlag = true;showImg = true"
                                :style="'left:'+slideLeft+'px'">
                                <div class="verify-move-block">
                                    <i class="verify-icon iconfont icon-right"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="success-box" :class="isSuccess ? 'show' : ''">
                        <span>验证通过</span>
                        <div class="success">
                            <img src="../../assets/img/success.png" alt="">
                        </div>
                    </div>
                    <p id="tips">{{message}}</p>
                    <div class="login-btn" id="login-btn" @click="login">登&nbsp;&nbsp;录</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import store from '../../store/SessionStorageStore';
import * as api from '@/api/api';
import CanvasParticle from '../../assets/js/canvas-particle';
import img1 from '../../assets/img/1.jpg';
import img2 from '../../assets/img/2.jpg';
import img3 from '../../assets/img/3.jpg';
export default {
    data() {
        return{
            username: null,
            password: null,
            imgArr: [img1,img2,img3],
            //--------滑动验证相关----------
            imgUrl: img1,//验证图片
            mouseDownFlag: false,//鼠标是否按下
            validationFlag: false,//是否开始验证
            mouseOverFlag: false,//鼠标是否移入
            showImg: false,//显示图片
            startX: 0,//鼠标按下初始横坐标
            startY: 0,//鼠标按下初始纵坐标
            X: 0,//鼠标移动横坐标
            Y: 0,//鼠标移动纵坐标
            slideLeft: -1,//滑块left值
            openAnimation: false,//滑块过度效果
            blank_left: 10,//空白区域left值
            blank_top: 10,//空白区域top值
            isSuccess: false,//是否验证成功
            message: '',//提示信息
        }
    },

    //计算属性
    computed: {
        
    },

    //钩子函数（页面挂载完成时触发）
    mounted() {
        this.createCanvas();
        this.randomBlank();
        this.getBackGroundImg();
    },

    //自定义方法
    methods: {
        //创建Canvas动画
        createCanvas() {
            //配置
            let config = {
                vx: 4,	//小球x轴速度,正为右，负为左
                vy: 4,	//小球y轴速度
                height: 2,	//小球高宽，其实为正方形，所以不宜太大
                width: 2,
                count: 200,		//点个数
                color: "121,162,185", 	//点颜色
                stroke: "130,255,255", 		//线条颜色
                dist: 6000, 	//点吸附距离
                e_dist: 20000, 	//鼠标吸附加速距离
                max_conn: 10 	//点到点最大连接数
            }
            //调用
            CanvasParticle(config);
        },
        //取随机整数
        randomNum() {
            let min = 0;
            let max = this.imgArr.length-1;
            return Math.floor(Math.random()*(max-min+1)+min);
        },
        //计算滑动验证背景图片
        getBackGroundImg(){
            let num = this.randomNum();
            let imgUrl = this.imgArr[num];
            this.imgUrl = imgUrl;
        },
        //生成随机空白
        randomBlank() {
            let width = this.$refs.img_box.offsetWidth - 50;
            let height = this.$refs.img_box.offsetHeight - 50;
            let left = Math.floor(Math.random()*(width-10+1)+10);
            let top = Math.floor(Math.random()*(height-10+1)+10);
            this.blank_left = left;
            this.blank_top = top;
        },
        //鼠标按下
        slideDown(event) {
            this.openAnimation = false;
            this.mouseDownFlag = true;
            this.validationFlag = true;
            this.startX = event.pageX;
            // this.startY=event.offsetY
        },
        //鼠标放开---验证
        slideUp() {
            this.mouseDownFlag = false;
            //判断是否验证成功
            let offset = Math.abs(this.slideLeft - this.blank_left);
            if(offset < 4 && this.validationFlag){
                this.validationFlag = false;
                this.showImg = false;
                this.isSuccess = true;
                if(this.message === '验证失败，请重试' || this.message === '请先进行拼图验证') {
                    this.message = '';
                }
            }else if(this.validationFlag){
                this.validationFlag = false;
                this.message = '验证失败，请重试';
                this.openAnimation = true;
                this.refresh()
            }
        },
        //鼠标移动
        slideMove(event) {
            if(this.mouseDownFlag && this.mouseOverFlag){
                let width = this.$refs.slide_box.offsetWidth - 40;
                let X=event.pageX;
                let Y=event.pageX
                this.slideLeft += X - this.startX;
                if(this.slideLeft < 0 || this.slideLeft > width){
                    this.mouseOverFlag = false;
                }
                this.slideLeft = this.slideLeft < 0 ? 0 : this.slideLeft > width ? width : this.slideLeft;
                this.startX = X;
            }
        },
        //鼠标移出验证区域
        mouseOut() {
            if(!this.mouseDownFlag){
                window.timeOut = setTimeout(() => {
                    this.showImg = false;
                },200)
            }
        },
        mouseOver() {
            if(window.timeOut){
                clearTimeout(window.timeOut);
            }
        },
        refresh() {
            this.slideLeft = 0;
            this.blank_left = 0;
            this.blank_top = 0;
            this.randomBlank();
            this.getBackGroundImg();
        },
        //验证
        blur(id) {
            if(id === 0 && !this.username){
                this.message = '请输入用户名';
            }else if(id === 0 && this.username && this.message === '请输入用户名') {
                this.message = '';
            }else if(id === 1 && !this.password){
                this.message = '请输入密码';
            }else if(id === 1 && this.password && this.message === '请输入密码') {
                this.message = '';
            }
        },
        //登录
        login() {
            if(!this.username){
                this.message = '请输入用户名';
            }else if(!this.password){
                this.message = '请输入密码';
            }else if(!this.isSuccess){
                this.message = '请先进行拼图验证';
            }else {
                let userData = {
                    account: this.username,
                    password: this.password
                }
                this.$store.state.isLoading = true;
                this.$store.state.loadingMsg = '身份认证中';
                // if(this.username === '111'){
                //     this.$store.state.isLoading = true;
                //     this.$store.state.loadingMsg = '身份认证中';
                //     setTimeout(() => {
                //         let key = 'Login_info';
                //         store.save(key,userData);
                //         this.$store.state.loadingMsg = '欢迎您';
                //         setTimeout(() => {
                //             this.$store.state.isLoading = false;
                //             this.$store.state.isLogin = true;
                //             this.$store.state.loadingMsg = '加载中';
                //         },1000)
                //     },2000)
                // }else{
                //     this.$store.state.isLoading = true;
                //     this.$store.state.loadingMsg = '身份认证中';
                //     setTimeout(() => {
                //         this.$store.state.loadingMsg = '认证失败';
                //         setTimeout(() => {
                //             this.$store.state.isLoading = false;
                //             this.message = '用户名或密码错误，请重试';
                //         },1000)
                //     },2000)
                // }
                api.userLogin(userData).then(res => {
                    if(res.data.code === 200) {
                        let userData = res.data.data;
                        if(userData.role_id === '0') {
                            this.$store.state.loadingMsg = '身份认证失败';
                            setTimeout(() => {
                                this.$store.state.isLoading = false;
                                this.message = '对不起，您暂时没有权限登录本系统，请联系管理员开通权限！';
                            },1000)
                        }else {
                            this.$store.state.loadingMsg = '欢迎您';
                            let STORAGE_KEY = 'Login';
                            store.save(STORAGE_KEY,userData);
                            this.message = '登录成功，正在跳转，请稍后...';
                            let id = userData.role_id.split(',');
                            id = id.join(' ');
                            id = id + ',in';
                            let body = {
                                model: 'Roles',
                                condition: {
                                    id
                                }
                            };
                            api.getDataList(body).then(res => {
                                if(res.data.code === 200) {
                                    let roles = '';
                                    for (const item of res.data.data.data) {
                                        if(roles) {
                                            roles = roles + ',' + item.auth_ids;
                                        }else {
                                            roles += item.auth_ids;
                                        }
                                    }
                                    let STORAGE_KEY = 'Roles';
                                    store.save(STORAGE_KEY,roles);
                                    this.$store.state.loadingMsg = '加载中'
                                    this.$store.state.isLogin = true;
                                    this.$store.state.isLoading = false;
                                }
                            })
                        }
                    }else {
                        this.$store.state.loadingMsg = '身份认证失败';
                        setTimeout(() => {
                            this.$store.state.isLoading = false;
                            this.message = res.data.msg + ' 请重试!';
                        },1000)
                    }
                })
                
            }
        }
        
    },
}
</script>

<style lang="less" scoped>
#login {
  height: 100%;
  width: 100%;
  .header {
    height: 50px;
    width: 100%;
    background-color: #333;
    padding: 0 200px;
    display: flex;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 12;
    .logo {
      display: flex;
      .logo-box {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
        margin-top: 5px;
        .logo-img {
          width: 100%;
          height: 100%;
        }
      }
      .name {
        color: #fff;
        margin-left: 20px;
        line-height: 50px;
        font-weight: bold;
        letter-spacing: 2px;
        font-size: 16px;
      }
    }
  }
  .content {
    height: 100%;
    width: 100%;
    padding-top: 50px;
    box-sizing: border-box;
    background-color: #363636;
    .login-box {
      width: 420px;
      height: 400px;
      padding: 20px 60px;
      box-sizing: border-box;
      background-color: #fafafa;
      border-radius: 10px;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      z-index: 20;
      .login-title {
        color: #333;
        text-align: center;
      }
      .login-form {
        margin-top: 20px;
        position: relative;
        height: 262px;
        input {
          box-sizing: border-box;
          width: 100%;
          height: 38px;
          padding: 5px 5px;
          margin-top: 15px;
          border-radius: 3px;
          border: 1px solid #dcdcdc;
          outline: none;
          z-index: 20;
          position: relative;
          &:focus {
            border: 1px solid #1abc9c;
          }
        }
        .slideVerify {
            position: relative;
            top: -128px;
            z-index: 10;
            &.show{
                z-index: 30;
            }
            .verify-img-panel{
                width: 300px;
                height: 150px;
                text-align: right;
                margin-bottom: 5px;
                padding: 4px;
                position: relative;
                visibility: hidden;
                &.hover{
                    visibility: initial!important;
                }
                .verify-refresh{
                    display: inline;
                }
                .verify-gap{
                    width: 38px;
                    height: 38px;
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: 10;
                    border: 1px solid #fff;
                }
                .verify-blank{
                    width: 38px;
                    height: 38px;
                    background-color: #fff;
                    border: 1px solid #fff;
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: 9
                }
                .verify-refresh {
                    text-align: right;
                    .iconfont{
                        font-size: 18px;
                        color: #fff;
                        cursor: pointer;
                    }
                }
            }
            .verify-bar-area{
                width: 100%;
                height: 40px;
                background-color: #f2f2f2;
                text-align: center;
                line-height: 40px;
                position: relative;
                border: 1px solid #ccc;
                border-radius: 4px;
                overflow: hidden;
                .verify-left-bar{
                    height: 40px;
                    width: 40px;
                    background-color: #fff;
                    position: absolute;
                    top: -1px;
                    border: 1px solid #ccc;
                    cursor: pointer;
                    z-index: 11;
                    &:hover{
                        background-color: #1abc9c;
                        color: #fff;
                    }
                    &.animation{
                        transition: left .5s;
                    }
                }
                .verify-bc{
                    width: 0px;
                    height: 38px;
                    background-color: rgba(92,184,92,.5);
                    display: inline-block;
                    position: absolute;
                    left: 0;
                    top: 0;
                    z-index: 10;
                    border: 1px solid #5cb85c;
                    &.animation{
                        transition: width .5s;
                    }
                }
            }
        }
        #success-box {
          height: 42px;
          width: 100%;
          color: #fff;
          line-height: 42px;
          text-align: center;
          position: relative;
          z-index: 30;
          background-color: #1abc9c;
          border: 1px solid #dcdcdc;
          border-radius: 4px;
          top: -168px;
          visibility: hidden;
          &.show{
              visibility: initial!important;
          }
          .success {
            width: 44px;
            height: 42px;
            background-color: #fff;
            overflow: hidden;
            position: absolute;
            top: -1px;
            right: -1px;
            border: 1px solid #ccc;
            img {
              width: 22px;
              line-height: 42px;
              margin: auto;
              margin-top: 10px;
            }
          }
        }
        #tips {
          height: 20px;
          color: red;
          margin-top: 30px;
          font-size: 14px;
          position: relative;
          top: -190px;
          &::before{
              content: '';
              clear: both;
              display: block;
          }
        }
        .login-btn {
          width: 100%;
          height: 38px;
          margin-top: 0px;
          background-color: #1abc9c;
          border-radius: 4px;
          text-align: center;
          line-height: 38px;
          font-weight: bold;
          position: relative;
          top: -170px;
          color: #fff;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
